<template>
  <view style="position: relative;" class="add-address-view">
    <view class="h20"></view>
    <form>
      <view class="form-item self-border-bottom">
        <text class="form-item-label">门店名称</text>
        <input type="text" class="form-item-input" v-model="formInfo.shopName" placeholder="请填写您的门店名称" placeholder-class="input-placeholder"/>
        <view class="no-arrow"></view>
      </view>
      <view class="form-item self-border-bottom border-none">
        <text class="form-item-label">门店电话</text>
        <input type="text" class="form-item-input" @blur="getzhengze" v-model="formInfo.shopPhone" placeholder="请填写手机号/座位号" placeholder-class="input-placeholder"/>
        <view class="no-arrow"></view>
      </view>
      <view class="h20"></view>
      <view class="form-item self-border-bottom">
        <text class="form-item-label">所在城市</text>
        <picker :value="multiDistrictIndex" range-key="name" :range="multiDistrictArray" @cancel="bindDistrictPickerCancel" @change="bindDistrictPickerChange" @columnchange="bindDistrictColumnPickerChange" class="form-item-pick" mode="multiSelector">
          <view class="pick-value pick-left" v-if="multiDistrictArray && multiDistrictArray.length > 0 && selectDistrict">
            <text v-if="multiDistrictArray[0] && multiDistrictArray[0][multiDistrictIndex[0]]">{{multiDistrictArray[0][multiDistrictIndex[0]].name}}</text>
            <text v-if="multiDistrictArray[1] && multiDistrictArray[1][multiDistrictIndex[1]]">{{multiDistrictArray[1][multiDistrictIndex[1]].name}}</text>
            <text v-if="multiDistrictArray[2] && multiDistrictArray[2][multiDistrictIndex[2]]">{{multiDistrictArray[2][multiDistrictIndex[2]].name}}</text>
          </view>
          <view class="pick-value" v-else>请选择</view>
        </picker>
        <view class="arrow"></view>
      </view>
      <view class="form-item self-border-bottom">
        <text class="form-item-label">门店地址</text>
        <input type="text" class="form-item-input" v-model="formInfo.shopAddress" placeholder="请填写门店地址" placeholder-class="input-placeholder" @input="changeShopAddress"/>
        <view class="no-arrow"></view>
      </view>
      <view class="form-item self-border-bottom border-none">
        <text class="form-item-label">手动定位</text>
        <view class="form-item-pick" @click="gotoLocation">
          <view class="pick-value pick-left" v-if="newAddress">
            <text>{{newAddress}}</text>
          </view>
          <view class="pick-value" v-else>请选择</view>
        </view>
        <view class="arrow"></view>
      </view>
      <view class="h20"></view>
      <view class="form-item self-border-bottom">
        <text class="form-item-label">经营品类</text>
        <picker class="form-item-pick" :value="productIndex" range-key="name" :range="productArray" @change="getCurProduct">
          <view class="pick-value pick-left" v-if="formInfo.productId && formInfo.productId != -1">
            <text>{{chooseProduct.name}}</text>
          </view>
          <view class="pick-value" v-else>请选择</view>
        </picker>
        <view class="arrow"></view>
      </view>
      <view class="form-item self-border-bottom">
        <text class="form-item-label">营业开始时间</text>
        <picker class="form-item-pick" mode="time" :value="formInfo.startTime" @change="bindStartTimeChange">
          <view class="pick-value pick-left" v-if="formInfo.startTime && startFlag">
            <text>{{formInfo.startTime}}</text>
          </view>
          <view class="pick-value" v-else>请选择</view>
        </picker>
        <view class="arrow"></view>
      </view>
      <view class="form-item self-border-bottom border-none">
        <text class="form-item-label">营业结束时间</text>
        <picker class="form-item-pick" mode="time" :value="formInfo.endTime" @change="bindEndTimeChange">
          <view class="pick-value pick-left" v-if="formInfo.endTime && endFlag">
            <text>{{formInfo.endTime}}</text>
          </view>
          <view class="pick-value" v-else>请选择</view>
        </picker>
        <view class="arrow"></view>
      </view>
      
      <view class="btn_div">
        <view class="h20"></view>
        <view class="update-box">
          <view class="tit">
            <view class="left">门店LOGO <text>（用于爆品的店铺对外展示）</text></view>
            <view class="right" @click="getCheckImg(0)">示例</view>
          </view>
          <view class="cont">
            <view class="no-photo width" v-if="!logoUrl" @click="uploadImg(1)">
              <image :src="$store.state.imgBaseUrl + '/id.png'"></image>
              <view class="text1">
                上传门店LOGO
              </view>
            </view>
            <view class="has-photo width" v-else>
              <image :src="logoUrl"></image>
              <view class="close" @click="delectImg(1)"><image :src="$store.state.imgBaseUrl + '/cancel.png'"></image></view>
            </view>
          </view>
        </view>
        <!-- <view class="h20"></view>
        <view class="update-box">
          <view class="tit">
            <view class="left">门头照片</view>
            <view class="right">示例</view>
          </view>
          <view class="cont">
            <view class="no-photo width" v-if="!shopHeadUrl" @click="uploadImg(2)">
              <image src="../../static/image/id.png"></image>
              <view class="text1">
                上传门头照片
              </view>
            </view>
            <view class="photo-box" v-else>
              <view class="has-photo width">
                <image :src="shopHeadUrl"></image>
                <view class="close" @click="delectImg(2)"><image src="../../static/image/cancel.png"></image></view>
              </view>
            </view>
          </view>
        </view> -->
        <view class="h20"></view>
        <view class="update-box">
          <view class="tit">
            <view class="left">店内环境照片</view>
            <view class="right" @click="getCheckImg(1)">示例</view>
          </view>
          <view class="cont">
            <view class="sp-photo" v-if="shopImg.length == 0" @click="uploadShopImg">
              <image  :src="$store.state.imgBaseUrl + '/store-2.png'"></image>
              <view class="text2">
                <view>上传图片</view>
                <view class="text3">最多上传3张</view>
              </view>
            </view>
            <view class="small-photo" v-else>
              <view class="box" v-for="(item, index) in shopImg" :key="index">
                <view class="close"><image :src="$store.state.imgBaseUrl + '/cancel.png'" @click="delectShopImg(index)"></image></view>
                <image :src="item"></image>
              </view>
              <view class="box" v-if="shopImg.length < 3" @click="uploadShopImg">
                <image :src="$store.state.imgBaseUrl + '/up-img.png'"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </form>
    <view class="uni-padding-wrap uni-common-mt">
      <button type="parimay" @click="submitInfo">确认完成</button>
    </view>
    <uni-popup class="join-pop" ref="remark" type="center" :maskClick="false" :show="false">
      <view class="pop-box">
        <view class="tit">
          补充说明
        </view>
        <view class="cont">
          <view class="text3">请提供修改的信息原因，帮助工作人员核实，加快通过审核速度</view>
          <textarea value="" placeholder="" v-model="remarks"/>
        </view>
        <view class="foot">
          <button type="parimay" @click="makeSure">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import { multiDistrict, checkImage } from '../../unit/common.js'
import uniPopup from "@/components/uni-popup/components/uni-popup/uni-popup.vue"
import { getProduct, saveShopInfo, getStoreInfo, changeShop } from "@/service/storeManage/storeManage.service.js"
import graceChecker from '@/unit/graceChecker.js'
import { uploadFile } from "@/unit/common.js"
export default {
  components: {uniPopup},
  data() {
    return {
      inptSize: '24rpx', // placeholder的字体大小
      selectDistrict: false,
      id: null, // 地址Id, 编辑的时候用到
      addressInfo: {
        districtId: [], //  
        street:'', // 详细地址
      },
      // 省市区相关
      multiDistrictIndex: [], // 省市区选择的index
      multiDistrictArray: [], // 省市区数据 Array[Object]
      multiDistrictIds: [], // 省市区ID
      originMultiDistrictIndex: [], // 原始数据 用于取消选择省市区，还原原始数据
      originMultiDistrictArray: [], // 原始数据 用于取消选择省市区，还原原始数据
      originMultiDistrictIds: [], // 原始数据 用于取消选择省市区，还原原始数据
      recordAddress: '', // 记录门店的详细地址
      productArray: [{name: '请选择',id: -1}],
      chooseProduct: {id: '', name: ''},
      productIndex: -1,
      startFlag: false,
      endFlag: false,
      formInfo: {
        shopName: '', // 门店名称
        shopPhone: '', // 门店电话
        districtId: [], // 省市区id
        shopAddress: '', // 门店地址
        productId: null, //经营品类id
        startTime: '00:00', // 开始时间
        endTime: '00:00', // 结束时间
        latitude: '', // 纬度
        longitude: '' // 经度
      },
      logo: '', //logo的id
      logoUrl: '', //logo的地址
      shopHeadUrl: '', // 门头地址
      shopHeadId: '', // 门头id
      shopImg: [], // 店内环境图
      shopImgId: [], // 店内环境图id
      remarks: '', // 备注
      pageStatus: null,
      locationText: null,
      recordId: null ,// 记录更新时门店的id
      newAddress: '',
      esgImg: [
        this.$store.state.imgBaseUrl + '/esg_img/s-2.png',
        this.$store.state.imgBaseUrl + '/esg_img/s-3.png',
      ]
    };
  },
  onLoad:function(options) {
    this.pageStatus = options.status;
    this.shopImgId = [];
    this.shopImg = [];
  },
  mounted() {
    this.initDraw()
  },
  methods: {
    getzhengze () {
      // console.log(this.formInfo.shopPhone, 'jkjkk')
      // let regExp = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
      // if (RegExp.test(this.formInfo.shopPhone) == false) {
        
      // }
    },
    initDraw() {
      this.shopImgId = [];
      this.shopImg = [];
      let storeDatas = uni.getStorageSync('saveStoreInfo');
      getStoreInfo({}, res => {
        if (res.status == 0) {
          if (!this.pageStatus) { // 第一次申请
            if (res.data) {
              if (res.data.status == 1) { // 审核成功
                uni.redirectTo({
                  url: '/pages/storeManage/success'
                });
                return false;
              } else {
                uni.redirectTo({
                  url: '/pages/storeManage/result'
                });
                return false;
              }
            } else {
              if (!storeDatas) {
                this.initDistrictData() // 渲染地区信息
                this.getProductData() // 获取经营品类
              } else {
                this.drawStoreDatas(storeDatas); // 回显本地存储的信息
              }
            }
          } else { // 重新申请
            if (!storeDatas) {
              this.recordId = res.data.id;
              this.formInfo.shopName = res.data.name;
              this.formInfo.shopPhone = res.data.mobile ? res.data.mobile : '';
              this.startFlag = true;
              this.endFlag = true;
              this.formInfo.startTime = (res.data.beginTime).substr(0,5);
              this.formInfo.endTime = (res.data.endTime).substr(0,5);
              this.formInfo.shopAddress = res.data.address;
              this.formInfo.latitude = res.data.latitude; // 纬度
              this.formInfo.longitude = res.data.longitude; // 经度
              this.newAddress = res.data.address;
              this.initDistrictData(res.data.districts);
              this.selectDistrict = true;
              this.getProductData(res.data.storeType) // 获取经营品类
              this.chooseProduct= {
                name: res.data.storeTypeName
              }
              this.logoUrl = res.data.avatar;
              this.logo = res.data.avatarId;
              res.data.storeInList.forEach((item, i) => {
                this.shopImg.push(item.url);
                this.shopImgId.push(item.fileId)
              })
            } else {
              this.drawStoreDatas(storeDatas); // 回显本地存储的信息
            }
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    drawStoreDatas (storeDatas) {
      this.shopImg = [];
      this.shopImgId=[];
      this.formInfo = storeDatas.formInfo;
      if (this.formInfo.startTime != '00:00' || this.formInfo.endTime != '00:00') {
        this.startFlag = true;
        this.endFlag = true; 
      }
      this.recordId = storeDatas.recordId;
      this.initDistrictData(storeDatas.districts);
      this.selectDistrict = true;
      this.getProductData(storeDatas.storeType) // 获取经营品类
      this.chooseProduct.name = storeDatas.chooseProduct
      this.logoUrl = storeDatas.logoUrl;
      this.logo = storeDatas.logo;
      this.shopImg = storeDatas.shopImg;
      this.shopImgId = storeDatas.shopImgId;
      this.newAddress = storeDatas.newAddress;
    },
    changeShopAddress () {
      this.newAddress = ''; // 初始化门店地址
      this.formInfo.latitude = ''; // 初始化经纬度
      this.formInfo.longitude = '';
    },
    getCheckImg (index) {
      // 调用
      checkImage(this.esgImg, index)
    },
    delectShopImg (i) {
      this.shopImg.splice(i, 1);
      this.shopImgId.splice(i, 1);
    },
    uploadShopImg () {
      uploadFile({success: (obj) => {
        if (obj.status == 0) {
          this.shopImg.push(obj.data.url);
          this.shopImgId.push(obj.data.id);
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      }})
    },
    delectImg (type) {
      if (type == 1) {
        this.logo = '';
        this.logoUrl = '';
      } else {
        this.shopHeadUrl = '';
        this.shopHeadId = '';
      }
    },
    uploadImg (type) {
      uploadFile({success: (obj) => {
        if (obj.status == 0) {
          if (type == 1 ) {
            this.logoUrl = obj.data.url;
            this.logo = obj.data.id;
          } else {
            this.shopHeadUrl = obj.data.url;
            this.shopHeadId = obj.data.id;
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      }})
    },
    getProductData (id) {
      this.productArray = [{name: '请选择',id: -1}];
      getProduct({}, res => {
        if (res.status == 0) {
          this.productArray = this.productArray.concat(res.data);
          // this.productArray = res.data;
          if (id) {
            this.productArray.forEach((item, index) => {
              if (item.id === id) {
                this.productIndex = index;
                this.formInfo.productId = item.id;
              }
            })
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    gotoLocation () {
      if (!this.selectDistrict || !this.formInfo.shopAddress) {
        uni.showToast({
          title: '请填写完整地址',
          icon: 'none'
        });
        return false;
      }
      this.recordAddress = this.originMultiDistrictArray[0][this.multiDistrictIndex[0]].name + this.originMultiDistrictArray[1][this.multiDistrictIndex[1]].name + this.originMultiDistrictArray[2][this.multiDistrictIndex[2]].name;
      if (this.recordAddress.indexOf('市辖区') !== -1) {
        this.recordAddress = this.recordAddress.replace('市辖区', '')
      }
      let area = this.originMultiDistrictArray[1][this.multiDistrictIndex[1]].name=='市辖区'?this.originMultiDistrictArray[0][this.multiDistrictIndex[0]].name:this.originMultiDistrictArray[1][this.multiDistrictIndex[1]].name;
      let st = this.pageStatus ? 1 : 0;
      let params = { // 存储门店信息
        recordId: this.recordId,
        formInfo: this.formInfo,
        chooseProduct: this.chooseProduct.name,
        logoUrl: this.logoUrl,
        logo: this.logo,
        shopImg: this.shopImg,
        shopImgId: this.shopImgId,
        districts: this.multiDistrictIds,
        newAddress: this.newAddress
      }
      uni.setStorage({
        key: 'saveStoreInfo',
        data: params,
        success: () => {
          uni.navigateTo({
            url: '/pages/storeManage/map?regin=' + this.recordAddress + '&area=' + area + '&detail=' + this.formInfo.shopAddress + '&st=' + st
          });
        }
      })
    },
    makeSure () {
      let params = {
        name: this.formInfo.shopName,
        mobile: this.formInfo.shopPhone,
        districtId: this.formInfo.districtId,
        address: this.formInfo.shopAddress,
        latitude: this.formInfo.latitude,
        longitude: this.formInfo.longitude,
        storeType: this.formInfo.productId,
        storeImages: this.shopImgId.join(','),
        // storeImages: this.shopImgId,
        fileId: this.logo,
        beginTime: this.formInfo.startTime + ':00',
        endTime: this.formInfo.endTime + ':00',
        editRemark: this.remarks
      }
      if (this.pageStatus) {
        // 更新门店
        params['id'] = this.recordId;
        changeShop(params, res => {
          if (res.status ==0) {
            this.$refs.remark.close();
            let storeKey = uni.getStorageSync('storeKey');
            if (storeKey) {
              uni.removeStorageSync('storeKey');
              this.$store.dispatch('getUserInfo'); // 更新userInfo信息
            }
            uni.removeStorageSync('saveStoreInfo')
            uni.redirectTo({
              url: '/pages/storeManage/result'
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
            this.$refs.remark.close();
          }
        })
      } else {
        // 新增门店
        saveShopInfo(params, res => {
          if (res.status ==0) {
            this.$refs.remark.close();
            uni.removeStorageSync('saveStoreInfo')
            uni.redirectTo({
              url: '/pages/storeManage/result'
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        })
      }
    },
    submitInfo () {
      //定义表单规则
      let rule = [
        {name:"shopName", checkType : "notnull", checkRule:"",  errorMsg: "请填写门店名称"},
        {name:"shopPhone", checkType : "notnull", checkRule:"",  errorMsg:"请输入门店电话"},
        {name:"shopPhone", checkType : "phoneAndFix", checkRule:"",  errorMsg:"请输入正确的门店电话"},
        {name:"districtId", checkType : "notnull", checkRule:"",  errorMsg:"请选择所在城市"},
        {name:"shopAddress", checkType : "notnull", checkRule:"",  errorMsg:"请输入门店地址"},
        {name:"productId", checkType : "notnull", checkRule:"",  errorMsg:"请选择经营品类"},
        {name:"longitude", checkType : "notnull", checkRule:"",  errorMsg:"请先手动定位"},
        {name:"latitude", checkType : "notnull", checkRule:"",  errorMsg:"请先手动定位"},
      ];
      //进行表单检查
      let checkRes = graceChecker.check(this.formInfo, rule);
      if (!checkRes) {
        uni.showToast({ title: graceChecker.error, icon: "none" });
        return false
      }
      if (!this.startFlag) {
        uni.showToast({ title: '请选择营业开始时间', icon: "none" });
        return false;
      }
      if (!this.endFlag) {
        uni.showToast({ title: '请选择营业结束时间', icon: "none" });
        return false
      }
      if (!this.logoUrl) {
        uni.showToast({ title: '请上传门店LOGO', icon: "none" });
        return false
      }
      if (this.shopImg.length == 0) {
        uni.showToast({ title: '请上传店内环境照片', icon: "none" });
        return false
      }
      if (this.pageStatus) {
        this.$refs.remark.open();
      } else {
        this.makeSure()
      }
    },
    async initDistrictData (district) { // 初始化省市区数据
      let {multiDistrictArray, multiDistrictIndex, multiDistrictIds} = await multiDistrict.initMultDistrictArray({
        district: district
      });
      this.multiDistrictArray = multiDistrictArray;
      this.multiDistrictIndex = multiDistrictIndex;
      this.multiDistrictIds = multiDistrictIds;
      this.originMultiDistrictArray = JSON.parse(JSON.stringify(multiDistrictArray));
      this.originMultiDistrictIndex = JSON.parse(JSON.stringify(multiDistrictIndex));
      this.originMultiDistrictIds = JSON.parse(JSON.stringify(multiDistrictIds));
      this.formInfo.districtId = this.multiDistrictIds[this.multiDistrictIds.length - 1];
      if (district) {
        this.locationText = this.originMultiDistrictArray[0][this.multiDistrictIndex[0]].name + this.originMultiDistrictArray[1][this.multiDistrictIndex[1]].name + this.originMultiDistrictArray[2][this.multiDistrictIndex[2]].name;
      }
    },
    bindDistrictPickerCancel (e) { // 取消省市区的选择
      this.multiDistrictArray = JSON.parse(JSON.stringify(this.originMultiDistrictArray));
      this.multiDistrictIndex = JSON.parse(JSON.stringify(this.originMultiDistrictIndex));
      this.multiDistrictIds = JSON.parse(JSON.stringify(this.originMultiDistrictIds));
    },
    bindDistrictPickerChange (e) { // 确认省市区的选择
      this.selectDistrict = true;
      this.originMultiDistrictArray = JSON.parse(JSON.stringify(this.multiDistrictArray));
      this.originMultiDistrictIndex = JSON.parse(JSON.stringify(this.multiDistrictIndex));
      this.originMultiDistrictIds = JSON.parse(JSON.stringify(this.multiDistrictIds));
      this.formInfo.districtId = this.multiDistrictIds[this.multiDistrictIds.length - 1];
    },
    async bindDistrictColumnPickerChange (e) { // 省市区的列发生变化
      this.formInfo.shopAddress = ''; // 初始化店铺地址
      this.newAddress = ''; // 初始化定位
      this.formInfo.latitude = ''; // 初始化经纬度
      this.formInfo.longitude = '';
      if (e.detail.column < this.multiDistrictArray.length - 1) {
        let {multiDistrictArray, multiDistrictIndex, multiDistrictIds} = await multiDistrict.bindDistrictColumnPickerChange({
          column: e.detail.column,
          index: e.detail.value,
          multiDistrictIndex: JSON.parse(JSON.stringify(this.multiDistrictIndex)),
          multiDistrictArray: JSON.parse(JSON.stringify(this.multiDistrictArray))
        });
        this.multiDistrictArray = multiDistrictArray;
        this.multiDistrictIndex = multiDistrictIndex;
        this.multiDistrictIds = multiDistrictIds;
      } else {
        this.multiDistrictIndex.splice(e.detail.column, 1, e.detail.value);
        this.multiDistrictIds.splice(e.detail.column, 1, this.multiDistrictArray[e.detail.column][e.detail.value].id);
      }
    },
    getCurProduct (e) {
      this.productIndex = e.target.value;
      if (this.productIndex != 0) {
        this.chooseProduct = this.productArray[this.productIndex];
        this.formInfo.productId = this.productArray[this.productIndex].id;
      } else {
        this.chooseProduct = {id: '', name: ''};
        this.formInfo.productId = '';
      }
    },
    bindStartTimeChange (e) {
      if (!this.compareStartTime(e.target.value)) {
        this.startFlag = true;
        this.formInfo.startTime = e.target.value;
      }
    },
    bindEndTimeChange (e) {
      if (!this.compareEndTime(e.target.value)) {
        this.endFlag = true;
        this.formInfo.endTime = e.target.value;
      }
    },
    compareStartTime (t) {
      let startStatus = false;
      let tarr1 = t.split(':');
      let start = (tarr1[0] * 1 *60) + (tarr1[1] *1);
      let end;
      if (this.formInfo.endTime && this.endFlag) {
        let tarr2 = this.formInfo.endTime.split(':');
        end = (tarr2[0] * 1 * 60) + (tarr2[1] * 1);
        if ((start - end) >= 0) {
          startStatus = true
          uni.showToast({ title: '开始时间不能大于结束时间', icon: "none" });
        }
      }
      return startStatus;
    },
    compareEndTime (t) {
      let endStatus = false;
      let tarr1 = t.split(':');
      let end = (tarr1[0] * 1 *60) + (tarr1[1] *1);
      let start;
      if (this.formInfo.startTime && this.startFlag) {
        let tarr2 = this.formInfo.startTime.split(':');
        start = (tarr2[0] * 1 * 60) + (tarr2[1] * 1);
        if ((end - start) <= 0) {
          endStatus = true
          uni.showToast({ title: '结束时间不能小于开始时间', icon: "none" });
        }
      }
      return endStatus;
    }
  }
}
</script>

<style lang="scss" scoped>
  .pop-box {
    .tit {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51,51,51,1);
      padding: 30rpx 0;
      text-align: center;
      border-bottom: 1px solid #E1E1E1;
    }
    .cont {
      padding: 26rpx 0 55rpx;
      .text3 {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(153,153,153,1);
        line-height: 35rpx;
        text-align: center;
        padding: 0 25rpx 0 20rpx;
        line-height: 1.5;
      }
      textarea {
        width: 506rpx;
        height: 330rpx;
        background: rgba(250,250,250,1);
        border-radius: 10rpx;
        margin: 19rpx auto 0;
        color: #333333;
        font-size: 26rpx;
        padding: 20rpx;
      }
    }
    .foot {
      button {
        width: 460rpx;
        height: 60rpx;
        line-height: 60rpx;
        color: #F6DA99;
        font-size: 24rpx;
        background: rgba(67,67,67,1);
        border-radius: 12rpx;
      }
      
    }
  }
  .is-Success {
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 150rpx;
      height: 150rpx;
      margin-left: 15rpx;
    }
    text {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
  image {
    width: 100%;
    height: 100%;
  }
  .update-box {
    padding: 41rpx 31rpx;
    .tit {
      font-family: PingFang SC;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 36rpx;
        font-weight: 500;
        color: #333333;
        text {
          color: #999999;
          font-size: 24rpx;
        }
      }
      .right {
        font-size: 28rpx;
        text-decoration: underline;
        color: #FF7473;
      }
    }
    .cont {
      margin-top: 30rpx;
      .no-photo {
        border:1px dashed #E1E1E1;
        border-radius: 16rpx;
        font-family: PingFang SC;
        .text1 {
          color: #666666;
          font-size: 24rpx;
          margin-top: 30rpx;
          text-align: center;
        }
        image {
          display: block;
          width: 79rpx;
          height: 79rpx;
          margin: 35rpx auto 0;
        }
      }
      .width {
        width: 330rpx;
        height: 200rpx;
      }
      .has-photo {
        background-color: #FAFAFA;
        position: relative;
        margin-bottom: 20rpx;
        // &:nth-last-of-type(2n) {
        //   margin-left: 26rpx;
        // }
        .close {
          width: 42rpx;
          height: 42rpx;
          position: absolute;
          right: -20rpx;
          top: -20rpx;
        }
        image {
          border-radius: 16rpx;
        }
      }
      .photo-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
      }
      .sp-photo {
        padding: 25rpx 46rpx;
        font-family: PingFang SC;
        border:1px dashed #E1E1E1;
        border-radius: 16rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        image {
          width: 38rpx;
          height: 30rpx;
        }
        .text2 {
          margin-left: 45rpx;
          color: #333333;
          font-size: 26rpx;
          .text3 {
            color: #999999;
            font-size: 22rpx;
            margin-top: 15rpx;
          }
        }
      }
      .small-photo {
        display: flex;
        flex-wrap: wrap;
        .box {
          position: relative;
          width: 110rpx;
          height: 110rpx;
          background-color: #FAFAFA;
          margin-left: 20rpx;
          &:first-of-type {
            margin-left: 0;
          }
          .close {
            width: 42rpx;
            height: 42rpx;
            position: absolute;
            right: -20rpx;
            top: -20rpx;
            z-index: 1;
          }
        }
      }
    }
  }
  
  .h20 {
    height: 20rpx;
    background-color: #FAFAFA;
  }

  .add-address-view {
    min-height: 100vh;
    padding-bottom: 114rpx;
    background-color: #FFFFFF;
  }
  .btn_div {
    width: 100%;
    // height: 451rpx;
    background: #FFF;
  }

  .pick-value {
    color: #999999;
    font-size: 24rpx;
  }
  /* 下面的button按钮 */
  .uni-common-mt button {
    width: 687rpx;
    height: 70rpx;
    background: #434343;
    font-size:30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(246, 218, 153, 1);
    margin:21rpx auto;
  }
  .uni-common-mt{
    width: 100%;
    background-color: #FFFFFF;
    position: fixed;
    bottom: 0;
    height: 112rpx;
    border-top:2rpx solid #E1E1E1;
    z-index: 2;
  }
  .form-item {
    display: flex;
    width: 718rpx;
    // justify-content: center;
    align-items: center;
    margin-left: 32rpx;
    // height: 100rpx;
    padding: 36rpx 0;
    border-bottom: 1px solid #E1E1E1;
    
    .form-item-label {
      width: 168rpx;
      text-align: left;
      padding: 0 32rpx 0 0;
      font-size: 28rpx;
      color: #333333;
      font-weight: bold;
    }
    .form-item-input {
      font-size: 28rpx;
      height: 38rpx;
      color: #666666;
      flex: 1;
      .input-placeholder {
        color: #999999;
        font-size: 24rpx;
      }
    }
    .form-item-pick {
      flex: 1;
    }
    .arrow {
      margin-right: 33rpx;
      border-right: 3rpx solid #8A8A8A;
      border-top: 3rpx solid #8A8A8A;
      height: 15rpx;
      width: 15rpx;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/
      border-left: 2rpx solid transparent;
      border-bottom: 2rpx solid transparent;
    }
    .no-arrow {
      margin-left: 64rpx;
    }
  }
  .border-none {
    border: none;
  }
  .pick-left {
    color: #666666;
    font-size: 28rpx;
  }
</style>
